import React, {Component} from 'react'

export default class TodoList extends Component {
    constructor() {
        super();
        this.newthing = React.createRef();
    }
    state = {
        chooseBtn: 'all',
        things: [
            {
                thing: 'Java',
                done: true
            }, {
                thing: 'H5',
                done: false
            }, {
                thing: 'JavaScript',
                done: false
            }
        ],
        newThing: {
            done: false,
            thing: ''
        }
    }
    changeNewThing = (e) => {
        this.setState({
            newThing: {
                thing: e.target.value
            }
        })

    }

    // 三种绑定表单元素方式
    addRef = () => {
        let {things} = this.state
        things.push({done: false, thing: this.thingElement.value})
        this.setState(things)
    }
    addState = () => {
        let {things} = this.state;
        things.push(this.state.newThing);
        this.setState({things})
    }
    addCon = () => {
        let {things} = this.state;
        things.push({done: false, thing: this.newthing.current.value});
        this.setState({things})
    }

    // 计算属性获取显示列表数组
    get show() {
        switch (this.state.chooseBtn) {
            case 'undo':
                return this.state.things.filter(item => {
                    return item.done === false
                })
            case 'done':
                return this.state.things.filter(item => {
                    return item.done === true
                })
            default:
                return this.state.things;
        }
    }

    // 切换点击显示按钮
    changeBtn = (e) => {
        let {chooseBtn} = this.state;
        chooseBtn = e.target.getAttribute('data-button');
        this.setState({chooseBtn})
    }

    // 点击切换显示完成未完成
    done = (e) => {
        let {things} = this.state;
        things[e.target.getAttribute('data-index')].done = !things[e.target.getAttribute('data-index')].done;
        this.setState({things})
    }
    render() {
        return (
            <div>
                <h1>TodoList</h1>


                <label htmlFor="">待办事项：（非受控-1）</label>
                
                <input type="text"
                    onBlur={
                        this.addRef
                    }
                    ref={
                        oinput => this.thingElement = oinput
                    }/>


                ||（受控组件-1）
                <input type="text"
                    onBlur={
                        this.addState
                    }
                    onChange={
                        this.changeNewThing
                    }
                    value={
                        this.state.newThing.thing
                    }/>


                || （非受控—2）<input type="text"
                    ref={
                        this.newthing
                    }
                    onBlur={
                        this.addCon
                    }/>


                <ul onClick={
                    this.done
                }>
                    {
                    this.show.map((item, index) => {
                        return (
                            <li data-index={index}
                                style={
                                    item.done ? {
                                        textDecoration: "line-through",
                                        color: 'red'
                                    } : null
                                }
                                key={index}>
                                {
                                item.thing
                            }</li>
                        )
                    })
                } </ul>
                <div onClick={
                    this.changeBtn
                }>
                    <button style={
                            this.state.chooseBtn === 'all' ? {
                                color: 'red'
                            } : null
                        }
                        data-button="all">All</button>
                    <button style={
                            this.state.chooseBtn === 'undo' ? {
                                color: 'red'
                            } : null
                        }
                        data-button="undo">Undo</button>
                    <button style={
                            this.state.chooseBtn === 'done' ? {
                                color: 'red'
                            } : null
                        }
                        data-button="done">Done</button>
                </div>
            </div>
        )
    }
}
